<template>

  <div class="main">
    <a-space direction="vertical" :size="16" class="grid">
      <a-row justify="start">
        <a-col :span="2" ><a-input v-model="sampleQuery.sampleType" placeholder="样片类型"  /></a-col>
        <a-col :span="2" class="row"><a-input v-model="sampleQuery.sampleClassName" placeholder="样片分类"></a-input></a-col>
<!--        <a-col :span="2" class="row"><a-input v-model="sampleQuery.apply" placeholder="适用范围" /></a-col>-->
<!--        <a-col :span="2" class="row"><a-input v-model="sampleQuery.title" placeholder="样片标题" /></a-col>-->
<!--        <a-col :span="2" class="row"><a-input v-model="sampleQuery.address" placeholder="拍摄地点" /></a-col>-->
        <a-col :span="2" class="row">
          <a-select v-model="sampleQuery.status" placeholder="请选择状态" allow-clear>
            <a-option :value="1">上架</a-option>
            <a-option :value="0">下架</a-option>
          </a-select>
        </a-col>
        <a-col :span="1" class="row"><a-button type="outline" @click="getList" >查询</a-button></a-col>
      </a-row>
    </a-space>

    <a-row justify="start" style="padding: 0 10px">
      <a-col :span="1"><a-button type="primary" @click="handleClick" >新增</a-button></a-col>
      <a-col :span="1"><a-button type="outline" @click="deleteClick(null)" status="danger" :disabled="selectList.length == 0">删除</a-button></a-col>
    </a-row>

    <a-table :data="data" row-key="id" :row-selection="selectList"
             :scroll="scroll" :scrollbar="scrollbar"
             v-model:selectedKeys="selectList" :pagination="false"
             style="background-color: white;">
      <template #columns>
        <a-table-column title="编号" data-index="id"></a-table-column>
        <a-table-column title="分类" data-index="sampleClassName"></a-table-column>
        <a-table-column title="类型" data-index="sampleType"></a-table-column>
<!--        <a-table-column title="范围" data-index="apply"></a-table-column>-->
        <a-table-column title="标题" data-index="title"></a-table-column>
<!--        <a-table-column title="地点" data-index="address"></a-table-column>-->
        <a-table-column title="封面图片" data-index="image[0].clientUrl">
          <template #cell="{record}">
            <a-image :src=" url + record.file[0].clientUrl" width="100" height="100"></a-image>
          </template>
        </a-table-column>
        <a-table-column title="状态" data-index="status">
          <template #cell="{record}">
            <a-tag v-if="record.status == 1" color="green">上架</a-tag>
            <a-tag v-if="record.status == 0" color="red">下架</a-tag>
          </template>
        </a-table-column>
        <a-table-column title="上传人" data-index="uploader"></a-table-column>
        <a-table-column title="上传时间" data-index="updateTime"></a-table-column>
        <a-table-column title="操作">
          <template #cell="{record}">
            <a-button type="text" @click="updataClick(record)">修改</a-button>
            <a-button type="text" @click="deleteClick(record)" status="danger">删除</a-button>
          </template>
        </a-table-column>
      </template>

      <template #footer>
        <a-pagination v-model:current="sampleQuery.pageNum" :total="sampleQuery.total"
                      v-model:page-size="sampleQuery.pageSize" @page-size-change="getList"
                      @change="getList"
                      show-total show-jumper show-page-size/>
      </template>
    </a-table>


    <sample-form-data  ref="sampleFormData"
                       v-model:vis="visible"
                       v-model:dto="sampleDto"
                       v-model:tit="title"
                       v-model:api="api"
                       v-model:src="src"
                       @ok="getList"
    >
    </sample-form-data>






  </div>

</template>

<script lang="ts" setup>


import type {SampleDto, SampleQuery} from "@/apis/sample";
import type {Reactive} from "vue-demi";
import {ref} from 'vue';
import type {Ref} from "vue-demi";
import {deleteSample, queryById, querySampleList} from "@/apis/sample";
import SampleFormData from "@/views/sample/view/SampleFormData.vue";
import {useUserStore} from "@/stores";
import {Notification} from "@arco-design/web-vue";
import type {OssFile} from "@/apis/active";


const selectList = ref([])
const data:Ref<SampleDto[]> = ref([])
const visible = ref(false);



const url = import.meta.env.VITE_API_BASE_URL;

const src:Ref<string> = ref("")

const title = ref('')
const scrollbar = ref(true);
const api = ref('')
const scroll = {
  x: 1200,
  y: 700
};



const sampleQuery:Reactive<SampleQuery> = reactive({
  id:null,
  sampleClassName:"",
  sampleType:'',
  apply:'',
  title:'',
  updateTime:'',
  address:'',
  uploader:'',
  photographer:'',
  status:null,
  pageNum:1,
  pageSize:10,
  total:0
})

const sampleDto:Reactive<SampleDto> = reactive({
  id:0,
  sampleClass:0,
  sampleClassName:'',
  sampleType:'',
  apply:'',
  frontCover:'',
  title:'',
  updateTime:'',
  address:'',
  uploader:useUserStore().userInfo.id,
  model:'',
  description:'',
  clothing:'',
  cameraModel:'',
  cameraLens:'',
  aperture:'',
  shutter:'',
  cameraIso:'',
  status:null,
  photographer:'',
  image: []
})

/**
 * 新增按钮
 * */
const handleClick = () => {
  title.value = '新增样片列表'
  api.value = 'add'
  visible.value = true;

}

/**
 * 修改按钮
 * */
const updataClick = (data:any) => {
  title.value = '修改样片列表'
  api.value = 'up'
  if (data == '0'){
    up(selectList.value)
  }else {
    up(data)
    src.value = url + data.file[0].clientUrl
  }

}

/**
 *  删除按钮
 * */
const deleteClick = (data:any) => {

  if (data == null){
    deleteSample(selectList.value).then(res =>{

      Notification.success({
        title: "删除成功",
        content: "删除成功",
        duration: 2000
      })
      getList()
    })
  }else {
    deleteSample([data.id]).then(res =>{

      Notification.success({
        title: "删除成功",
        content: "删除成功",
        duration: 2000
      })
      getList()
    })

  }
}

/**
 * 获得列表
 * */
const getList =  () => {
  querySampleList(sampleQuery).then(res => {
    console.log(res)
    data.value = res.data["data"].records
    sampleQuery.total = res.data["data"].total
  })
}


const up = async (data:any) =>{
  queryById(data.id).then(res =>{
    sampleDto.id = res.data.data.id
    sampleDto.sampleClass = res.data.data.sampleClass
    sampleDto.sampleType = res.data.data.sampleType
    sampleDto.apply = res.data.data.apply
    sampleDto.frontCover = res.data.data.frontCover
    sampleDto.title = res.data.data.title
    sampleDto.updateTime = res.data.data.updateTime
    sampleDto.address = res.data.data.address
    sampleDto.uploader = res.data.data.uploader
    sampleDto.model = res.data.data.model
    sampleDto.description = res.data.data.description
    sampleDto.clothing = res.data.data.clothing
    sampleDto.cameraModel = res.data.data.cameraModel
    sampleDto.cameraLens = res.data.data.cameraLens
    sampleDto.aperture = res.data.data.aperture
    sampleDto.shutter = res.data.data.shutter
    sampleDto.cameraIso = res.data.data.cameraIso
    sampleDto.status = res.data.data.status
    sampleDto.photographer = res.data.data.photographer
    sampleDto.photographerName = data.photographer
    sampleDto.sampleClassName = data.sampleClassName
    sampleDto.image = res.data.data.image

    for (let i = 0; i < sampleDto.image!.length; i++) {
      sampleDto.image![i].clientUrl = url + sampleDto.image![i].clientUrl
    }

    console.log(sampleDto.image)

    visible.value = true;


  })
}

getList()

</script>

<style lang="scss" scoped>
.group {
  .img {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 10px;
  }
  display: flex;
}

.grid {
  .row {
    margin: 0 10px;
  }
  margin: 10px;
  padding: 10px;
  background-color: white;
}
</style>